/**
 * 主题文物列表页
 */

import { useState, useEffect, useContext } from 'react'
import { View, Text, ScrollView, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { AppContext } from '../../store'
import { getLocale } from '../../i18n'
import { dataManager } from '../../utils/dataManager'
import { ThemeBase } from '../../types/theme'
import { ArtifactBase } from '../../types/artifact'
import './artifacts.scss'

function ThemeArtifacts() {
  const { state } = useContext(AppContext)
  const i18n = getLocale(state.locale)
  const [theme, setTheme] = useState<ThemeBase | null>(null)
  const [artifacts, setArtifacts] = useState<ArtifactBase[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const instance = Taro.getCurrentInstance()
    const themeId = instance.router?.params.id
    
    if (themeId) {
      loadThemeArtifacts(themeId)
    } else {
      Taro.showToast({
        title: i18n.common.error,
        icon: 'none'
      })
      setTimeout(() => {
        Taro.navigateBack()
      }, 1500)
    }
  }, [])

  const loadThemeArtifacts = (themeId: string) => {
    try {
      const themeData = dataManager.getThemeById(themeId)
      if (!themeData) {
        throw new Error('主题不存在')
      }

      const artifactsList = dataManager.getArtifactsByThemeId(themeId)
      
      setTheme(themeData)
      setArtifacts(artifactsList)
      
      // 设置导航栏标题
      Taro.setNavigationBarTitle({
        title: themeData.getName(state.locale)
      })
    } catch (error) {
      console.error('加载主题文物失败:', error)
      Taro.showToast({
        title: i18n.common.error,
        icon: 'none'
      })
      setTimeout(() => {
        Taro.navigateBack()
      }, 1500)
    } finally {
      setLoading(false)
    }
  }

  const handleArtifactClick = (artifactId: string) => {
    Taro.navigateTo({
      url: `/pages/artifact/detail?id=${artifactId}`
    })
  }

  if (loading) {
    return (
      <View className='theme-artifacts-container'>
        <View className='loading-wrapper'>
          <Text className='loading-text'>{i18n.common.loading}</Text>
        </View>
      </View>
    )
  }

  if (!theme) {
    return (
      <View className='theme-artifacts-container'>
        <View className='empty-wrapper'>
          <Text className='empty-text'>{i18n.common.error}</Text>
        </View>
      </View>
    )
  }

  return (
    <View className='theme-artifacts-container'>
      {/* 主题头部 */}
      <View className='theme-header' style={{ background: `linear-gradient(135deg, ${theme.color} 0%, ${theme.color}dd 100%)` }}>
        <View className='header-bg' />
        <View className='header-content'>
          <Text className='theme-icon'>{theme.icon}</Text>
          <Text className='theme-title'>{theme.getName(state.locale)}</Text>
          <Text className='theme-desc'>{theme.getDescription(state.locale)}</Text>
          <View className='theme-count-badge'>
            <Text className='count-text'>
              {artifacts.length} {i18n.home.artifactCount}
            </Text>
          </View>
        </View>
      </View>

      {/* 文物列表 */}
      <View className='artifacts-body'>
        {artifacts.length === 0 ? (
          <View className='empty-state'>
            <Text className='empty-icon'>📦</Text>
            <Text className='empty-title'>{i18n.theme.empty}</Text>
            <Text className='empty-hint'>
              {state.locale === 'zh' ? '该主题暂无文物，敬请期待' : 'No artifacts yet, coming soon'}
            </Text>
          </View>
        ) : (
          <ScrollView 
            scrollY 
            className='artifacts-scroll'
            enableBackToTop
          >
            <View className='artifacts-list'>
              {artifacts.map((artifact) => (
                <View
                  key={artifact.id}
                  className='artifact-card'
                  onClick={() => handleArtifactClick(artifact.id)}
                >
                  <View className='card-bg' style={{ backgroundColor: theme.color + '10' }} />
                  
                  {/* 文物图标/图片 */}
                  <View className='artifact-image-wrapper'>
                    <View className='artifact-image'>
                      <Text className='image-placeholder'>🏛️</Text>
                    </View>
                  </View>

                  {/* 文物信息 */}
                  <View className='artifact-info'>
                    <Text className='artifact-name'>{artifact.getName(state.locale)}</Text>
                    <View className='artifact-meta'>
                      <Text className='meta-tag'>{state.locale === 'zh' ? artifact.dynasty : artifact.dynastyEn}</Text>
                      <Text className='meta-divider'>·</Text>
                      <Text className='meta-tag'>{state.locale === 'zh' ? artifact.period : artifact.periodEn}</Text>
                    </View>
                    <Text className='artifact-description' numberOfLines={2}>
                      {artifact.getDescription(state.locale)}
                    </Text>
                  </View>

                  {/* 箭头 */}
                  <View className='card-arrow'>
                    <Text className='arrow-icon'>›</Text>
                  </View>
                </View>
              ))}
            </View>
          </ScrollView>
        )}
      </View>
    </View>
  )
}

export default ThemeArtifacts

